<template>
    <div class="group-list">
        <div class="move-box">
            <RiskLeftModule placeholders="编号/名称" @on-handleNode="clickNode" :treeData="treeData" :leftHeight="heights">
                <p slot="ltitle">勾稽组信息</p>
            </RiskLeftModule>
            <!-- 右侧 -->
            <!-- 勾稽组信息 -->
            <template v-if="nodeInfo == '本地' || nodeInfo == '外部'">
                <RiskRightModule :rightPlace="rightp1" v-model="groupInput1" :rightHeight="heights" @on-keyup="selectGroupData()">
                    <p slot="rtitle">勾稽组信息</p>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="primary" size="nimi" @click="selectGroupData()">查询</el-button>
                    </span>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="primary" size="nimi" @click="addGroup = true">新增</el-button>
                    </span>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="primary" size="nimi" @click="downLoadGroupFile">导出</el-button>
                    </span>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="danger" size="nimi" @click="removeGroupList">删除</el-button>
                    </span>
                    <slot>
                        <el-table
                            ref="table1"
                            size="mini"
                            style="width: 100%"
                            height="calc(100vh - 140px)"
                            :data="localData"
                            row-key="groupId"
                            @selection-change="handleSelectionGroup"
                            border
                        >
                            <el-table-column type="selection" width="55" reserve-selection></el-table-column>
                            <el-table-column label="勾稽组编号" width="120" prop="groupId"></el-table-column>
                            <el-table-column label="勾稽组名称" prop="groupName" show-overflow-tooltip></el-table-column>
                            <el-table-column label="创建日期" prop="createDate" show-overflow-tooltip align="center" sortable>
                                <template slot-scope="scope">
                                    <span>{{ dateFormat(scope.row.createDate) }} {{ timeFormat(scope.row.createTime) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="创建者" prop="createUser" show-overflow-tooltip></el-table-column>
                            <el-table-column label="操作" width="130">
                                <template slot-scope="scope">
                                    <RiskIconButton
                                        type="primary"
                                        icon="el-icon-edit"
                                        topTitle="编辑"
                                        @on-click="lookEitdId(scope.row)"
                                    ></RiskIconButton>
                                    <RiskIconButton
                                        type="danger"
                                        icon="el-icon-delete"
                                        topTitle="删除"
                                        @on-click="lookRemoveId(scope.row)"
                                    ></RiskIconButton>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <risk-pagination :paging="group" @page-change="currentChange"></risk-pagination>
                        </div>
                    </slot>
                </RiskRightModule>
                <div>
                    <!-- 新增 -->
                    <yh-dialog drag title="新增勾稽组" :visible.sync="addGroup" width="450px" v-loading="Loading">
                        <el-form label-width="120px" size="mini">
                            <el-form-item label="勾稽组编号">
                                <el-input placeholder="自动生成" style="width:220px" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="勾稽组名称">
                                <el-input style="width:220px" v-model="addGroupData.groupName"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="addGroup = false">
                                取 消
                            </el-button>
                            <el-button size="mini" type="primary" @click="addCheckGroup">确 定 </el-button>
                        </div>
                    </yh-dialog>
                    <!-- 删除勾稽组 -->
                    <yh-dialog drag title="确认删除勾稽组？" :visible.sync="removeGroup" width="500px" v-loading="Loading">
                        <div class="remove-text">
                            <span v-for="(itme, index) in groupNameList" :key="index"> {{ itme }} , </span>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="removeGroup = false">
                                取 消
                            </el-button>
                            <el-button size="mini" type="primary" @click="submitRemoveUser">确 定 </el-button>
                        </div>
                    </yh-dialog>
                    <!-- 编辑 -->
                    <yh-dialog drag title="编辑勾稽组" :visible.sync="editGroup" width="450px" v-loading="Loading">
                        <el-form label-width="120px" size="mini">
                            <el-form-item label="勾稽组编号">
                                <el-input style="width:220px" v-model="editGroupData.groupId" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="勾稽组名称">
                                <el-input style="width:220px" v-model="editGroupData.groupName"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="editGroup = false">
                                取 消
                            </el-button>
                            <el-button size="mini" type="primary" @click="editCheckGroup">确 定 </el-button>
                        </div>
                    </yh-dialog>
                </div>
            </template>
            <!-- 勾稽组规则 -->
            <template v-else>
                <RiskRightModule :rightPlace="rightp2" :rightHeight="heights" v-model="groupInput2" @on-keyup="selectGroupListData()">
                    <p slot="rtitle">勾稽组规则信息</p>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="primary" size="nimi" @click="selectGroupListData()">查询</el-button>
                    </span>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="primary" size="nimi" @click="editRule = true">编辑</el-button>
                    </span>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="primary" size="nimi" @click="outRoleExl()">导出明细</el-button>
                    </span>
                    <span slot="button" class="dict-r-slot">
                        <el-button type="danger" size="nimi" @click="openRemoveRule">删除</el-button>
                    </span>
                    <slot>
                        <el-table
                            ref="table2"
                            border
                            size="mini"
                            style="width: 100%"
                            max-height="600px"
                            :data="ruleData"
                            row-key="ruleId"
                            @selection-change="handleSelectionUser"
                        >
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column label="规则序号" width="100" prop="ruleId"></el-table-column>
                            <el-table-column label="规则名称" prop="ruleName" show-overflow-tooltip></el-table-column>
                            <el-table-column label="规则说明" prop="ruleDescroption" show-overflow-tooltip></el-table-column>
                            <el-table-column label="规则来源" prop="ruleSource" show-overflow-tooltip></el-table-column>
                            <el-table-column label="创建日期" prop="createDate" show-overflow-tooltip align="center" sortable>
                                <template slot-scope="scope">
                                    <span>{{ dateFormat(scope.row.createDate) }} {{ timeFormat(scope.row.createTime) }}</span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip align="center"></el-table-column> -->
                        </el-table>
                        <div class="block">
                            <risk-pagination :paging="groupDetli" @page-change="currentChange2"></risk-pagination>
                        </div>
                    </slot>
                </RiskRightModule>
                <div class="group-rule">
                    <yh-dialog drag title="编辑" :visible.sync="editRule" width="800px" v-loading="Loading">
                        <RiskTrantable
                            v-if="editRule"
                            ref="grouptrantable"
                            leftPlaceholder="编码/名称"
                            :leftColumns="tranColmens"
                            :leftTableData="filterLeftTranData"
                            :rightTableData="rightTranData"
                            indexKey="ruleId"
                            :leftSearchNames="['ruleId', 'ruleName']"
                        />
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="handleClick('cancel')">
                                取 消
                            </el-button>
                            <el-button size="mini" type="primary" @click="handleClick('confirm')">确 定 </el-button>
                        </div>
                    </yh-dialog>
                </div>
                <yh-dialog drag title="确认删除勾稽组下勾稽规则" :visible.sync="removeRule" width="500px" v-loading="Loading">
                    <div class="remove-text">
                        <span v-for="(itme, index) in deleteRuleList" :key="index"> {{ itme }} , </span>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="removeRule = false">
                            取 消
                        </el-button>
                        <el-button size="mini" type="primary" @click="deleteRule">确 定 </el-button>
                    </div>
                </yh-dialog>
            </template>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { downLoadFile } from '@/utils/request';
import { getCurrentPageData, timeFormat, dateFormat } from '@/utils/tools';

import RiskLeftModule from '@/common/components/risk-left-module.vue';
import RiskRightModule from '@/common/components/risk-right-module.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'GroupList',
    components: {
        RiskLeftModule,
        RiskRightModule,
        RiskIconButton,
        RiskTrantable,
    },
})
export default class GroupList extends Vue {
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    rightp1: string = '勾稽组编号/名称';
    rightp2: string = '规则编号/名称';
    groupInput1: string = '';
    groupInput2: string = '';
    nodeInfo: string = '本地';
    heights: string = '100vh';
    treeData: any[] = [
        {
            label: '本地',
            id: 1,
            children: [],
        },
    ];
    localData: any[] = [{}]; // 显示数据
    localDatas: any[] = [{}]; // 显示的总数据
    localDataList: any[] = [{}]; // 不能动的数据
    ruleData: any[] = [{}]; // 显示数据
    ruleDatas: any[] = [{}]; // 显示的总数据
    ruleDataList: any[] = [{}]; // 不能动的数据
    addGroup: boolean = false;
    Loading: boolean = false;
    addGroupData = {
        groupId: '自动生成',
        groupName: '',
    };
    editGroupData = {
        groupId: '',
        groupName: '',
        key: '',
    };
    groupNameList: any[] = [];
    groupLists: any[] = [];
    removeGroup: boolean = false;
    editGroup: boolean = false;
    tranColmens: any[] = [
        {
            label: '编号',
            prop: 'ruleId',
            width: 70,
        },
        {
            label: '名称',
            prop: 'ruleName',
        },
    ];
    leftTranData: any[] = [{}];
    rightTranData: any[] = [{}];
    editRule: boolean = false;
    deleteRuleList: any[] = [];
    removeRule: boolean = false;
    nodeDataList: any = {};
    group: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };

    groupDetli: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };

    mounted() {
        this.getGroupList();
    }

    // 获取勾稽数据
    getGroupList(): void {
        this.$axios.get('/checkGroup/list').then((res: any) => {
            this.localDataList = res;
            this.localDatas = res;
            this.group.total = this.localDatas.length;
            this.localData = getCurrentPageData(this.localDatas, this.group.currentPage, this.group.pageSize);
            let datas = [];
            for (let item of res) {
                let values = item.groupId + '-' + item.groupName;
                datas.push({ label: values, id: item.groupId });
            }
            this.treeData[0].children = datas;
        });
    }

    // 获取节点
    clickNode(val: any): void {
        if (this.nodeInfo !== val.label) {
            if (this.$refs.table1) {
                (this.$refs.table1 as any).clearSelection();
            }
            if (this.$refs.table2) {
                (this.$refs.table2 as any).clearSelection();
            }
            this.nodeInfo = val.label;
            this.nodeDataList = val;
            this.groupLists = [];
            this.deleteRuleList = [];
            this.getCheckRule();
        }
    }

    // 添加勾稽组信息
    addCheckGroup(): void {
        if (!this.addGroupData.groupName) {
            this.yh_message_error('勾稽组名称不能为空');
            return;
        }
        this.Loading = true;
        this.$axios
            .post('/checkGroup/add', this.addGroupData)
            .then((res: any) => {
                this.Loading = false;
                this.addGroup = false;
                this.addGroupData.groupName = '';
                this.yh_message_success('添加成功');
                this.getGroupList();
            })
            .catch(() => {
                this.Loading = false;
                // this.yh_message_error('添加失败');
            });
    }

    // 查看删除数据
    lookRemoveId(row: any): void {
        this.groupNameList = [];
        this.groupNameList.push(row.groupId);
        this.removeGroup = true;
    }

    // 选择的勾稽项
    handleSelectionGroup(val: any): void {
        this.groupLists = val.map(item => item.groupId);
    }

    // 赋值
    removeGroupList(): void {
        if (!this.groupLists) {
            this.yh_message_success('未选择删除项');
            return;
        }
        this.groupNameList = this.groupLists;
        this.removeGroup = true;
    }

    // 刪除勾稽組信息
    submitRemoveUser(): void {
        this.Loading = true;
        this.$axios({
            url: '/checkGroup/del',
            method: 'DELETE',
            data: this.groupNameList,
        })
            .then(res => {
                this.Loading = false;
                this.yh_message_success('删除成功');
                this.removeGroup = false;
                this.getGroupList();
            })
            .catch(() => {
                this.Loading = false;
            });
    }

    // 编辑详情数据
    lookEitdId(row: any): void {
        this.editGroup = true;
        this.editGroupData = row;
        this.editGroupData.key = row.groupId;
    }

    // 编辑
    editCheckGroup(): void {
        this.Loading = true;
        this.$axios({
            url: '/checkGroup/upd',
            method: 'PUT',
            data: this.editGroupData,
        })
            .then(res => {
                this.yh_message_success('编辑成功');
                this.Loading = false;
                this.editGroup = false;
                this.getGroupList();
            })
            .catch(() => {
                this.Loading = false;
            });
    }

    // 下载勾稽组信息
    downLoadGroupFile(): void {
        downLoadFile({
            url: '/checkGroup/export',
            method: 'post',
            data: this.groupLists,
        });
    }

    // 获取单条勾稽组详情
    getCheckRule(): void {
        this.$axios.get('checkGroup/query/checkRule/' + this.nodeDataList.id).then((res: any) => {
            this.ruleDataList = res;
            this.ruleDatas = res;
            this.groupDetli.total = this.ruleDatas.length;
            this.ruleData = getCurrentPageData(this.ruleDatas, this.groupDetli.currentPage, this.groupDetli.pageSize);
            this.rightTranData = res;
            let datas = [];
            if (res) {
                for (let item of res) {
                    datas.push(res.ruleId);
                }
            }

            this.getLeftcheckGroup(datas);
        });
    }

    // 过滤右边已选中的信息
    get filterLeftTranData() {
        return this.leftTranData.filter(leftItem => {
            let indexKey = 'ruleId';
            let leftKey = leftItem[indexKey];
            return !this.rightTranData.some(item => item[indexKey] === leftKey);
        });
    }

    // 获取组件左边数据
    getLeftcheckGroup(val: any): void {
        this.$axios
            .post('/checkGroup/query/checkRule/', {
                data: val,
            })
            .then((res: any) => {
                this.leftTranData = res.list;
            });
    }

    // 选择的勾稽组规则
    handleSelectionUser(val: any): void {
        this.deleteRuleList = val.map(item => item.ruleId);
    }

    // 判断是否有选中项
    openRemoveRule(): void {
        if (this.deleteRuleList && this.deleteRuleList.length > 0) {
            this.removeRule = true;
        } else {
            this.yh_message_success('未选择删除项');
        }
    }

    /**
     * 勾稽组编辑明细按钮事件
     */
    handleClick(action): void {
        if (action === 'confirm') {
            const rightData = (this.$refs.grouptrantable as any).getRightAllData();
            let rightDataKeys = rightData.map(item => item.ruleId);
            this.$axios({ url: '/checkGroup/edit/checkRule/' + this.nodeDataList.id, method: 'post', data: rightDataKeys }).then(res => {
                this.yh_message_success('修改成功!');
                this.editRule = false;
                this.getCheckRule();
            });
        }
        if (action === 'cancel') {
            this.editRule = false;
        }
    }

    // 删除勾稽组规则信息
    deleteRule(): void {
        this.Loading = true;
        this.$axios({
            url: '/checkGroup/del/checkRule/' + this.nodeDataList.id,
            method: 'DELETE',
            data: this.deleteRuleList,
        })
            .then(res => {
                this.Loading = false;
                this.removeRule = false;
                this.yh_message_success('删除成功');
                this.getCheckRule();
            })
            .catch(() => {
                this.Loading = false;
            });
    }

    // 导出明细
    outRoleExl(): void {
        downLoadFile({
            url: '/checkGroup/export/checkRule/' + this.nodeDataList.id,
            method: 'post',
            data: this.deleteRuleList,
            loading: true,
            loadingMsg: '正在准备导出，请稍后··· ···',
        });
    }

    // 查詢勾稽组信息
    selectGroupData(): void {
        this.localDatas = this.handleFilter(this.localDataList, this.groupInput1);
        this.group.total = this.localDatas.length;
        this.localData = getCurrentPageData(this.localDatas, this.group.currentPage, this.group.pageSize);
    }

    // 勾稽组分页
    currentChange(val: number): void {
        this.group.currentPage = val;
        this.localData = getCurrentPageData(this.localDatas, this.group.currentPage, this.group.pageSize);
    }

    // 筛选数据
    handleFilter(dataSource: any, param: any): any {
        if (!param || !dataSource) {
            return dataSource;
        } else {
            return dataSource.filter(
                (item: any) =>
                    (item.groupId || '').toUpperCase().includes(param.toUpperCase()) ||
                    (item.groupName || '').toUpperCase().includes(param.toUpperCase())
            );
        }
    }

    // 勾稽组规则分页
    currentChange2(): void {
        this.ruleData = getCurrentPageData(this.ruleDatas, this.groupDetli.currentPage, this.groupDetli.pageSize);
    }

    // 查看勾稽规则组信息
    selectGroupListData(): void {
        console.log(this.ruleDataList);
        this.ruleDatas = this.handleFilter2(this.ruleDataList, this.groupInput2);
        this.groupDetli.total = this.ruleDatas.length;
        this.ruleData = getCurrentPageData(this.ruleDatas, this.groupDetli.currentPage, this.groupDetli.pageSize);
    }

    // 筛选数据
    handleFilter2(dataSource: any, param: any): any {
        console.log(dataSource);
        if (!param || !dataSource) {
            return dataSource;
        } else {
            return dataSource.filter(
                (item: any) =>
                    (item.ruleId || '').toUpperCase().includes(param.toUpperCase()) ||
                    (item.ruleName || '').toUpperCase().includes(param.toUpperCase())
            );
        }
    }
}
</script>
<style lang="scss" scoped>
.group-list {
    .dict-r-slot {
        margin-right: 10px;
    }

    .group-rule {
        margin-top: 20px;

        & /deep/ .el-dialog .el-dialog__body {
            height: 460px !important;
            max-height: 100vh;
        }
    }
}
</style>
